<template>
  <view class="scale-container">
    <view class="scale-header">
      <text class="scale-title">不良事件特征问卷</text>
      <text class="scale-subtitle">请描述您所经历的事件特征</text>
    </view>
    
    <view class="form-container">
      <uni-forms ref="form" :model="formData" :rules="rules">
        <!-- 事件类型 -->
        <uni-forms-item label="事件类型" name="eventType" required>
          <uni-data-select v-model="formData.eventType" :localdata="eventTypeOptions" placeholder="请选择事件类型" />
        </uni-forms-item>
        
        <!-- 事件严重程度 -->
        <uni-forms-item label="事件严重程度" name="severity" required>
          <uni-data-select v-model="formData.severity" :localdata="severityOptions" placeholder="请选择严重程度" />
        </uni-forms-item>
        
        <!-- 事件发生时间 -->
        <uni-forms-item label="事件发生时间" name="eventTime" required>
          <uni-datetime-picker v-model="formData.eventTime" type="datetime" placeholder="请选择事件发生时间" />
        </uni-forms-item>
        
        <!-- 事件持续时间 -->
        <uni-forms-item label="事件持续时间" name="duration" required>
          <uni-data-select v-model="formData.duration" :localdata="durationOptions" placeholder="请选择持续时间" />
        </uni-forms-item>
        
        <!-- 涉及人员数量 -->
        <uni-forms-item label="涉及人员数量" name="peopleInvolved" required>
          <uni-data-select v-model="formData.peopleInvolved" :localdata="peopleOptions" placeholder="请选择涉及人员数量" />
        </uni-forms-item>
        
        <!-- 事件发生地点 -->
        <uni-forms-item label="事件发生地点" name="location" required>
          <uni-data-select v-model="formData.location" :localdata="locationOptions" placeholder="请选择发生地点" />
        </uni-forms-item>
        
        <!-- 事件描述 -->
        <uni-forms-item label="事件描述" name="description" required>
          <uni-easyinput v-model="formData.description" type="textarea" placeholder="请详细描述事件经过" />
        </uni-forms-item>
        
        <!-- 个人感受 -->
        <uni-forms-item label="个人感受" name="feelings" required>
          <uni-easyinput v-model="formData.feelings" type="textarea" placeholder="请描述您当时的感受和想法" />
        </uni-forms-item>
        
        <!-- 影响程度 -->
        <uni-forms-item label="对工作的影响程度" name="workImpact" required>
          <uni-data-select v-model="formData.workImpact" :localdata="impactOptions" placeholder="请选择影响程度" />
        </uni-forms-item>
      </uni-forms>
      
      <view class="form-actions">
        <button class="submit-btn" @click="submitForm">提交问卷</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        eventType: '',
        severity: '',
        eventTime: '',
        duration: '',
        peopleInvolved: '',
        location: '',
        description: '',
        feelings: '',
        workImpact: ''
      },
      rules: {
        eventType: {
          rules: [{ required: true, errorMessage: '请选择事件类型' }]
        },
        severity: {
          rules: [{ required: true, errorMessage: '请选择严重程度' }]
        },
        eventTime: {
          rules: [{ required: true, errorMessage: '请选择事件发生时间' }]
        },
        duration: {
          rules: [{ required: true, errorMessage: '请选择持续时间' }]
        },
        peopleInvolved: {
          rules: [{ required: true, errorMessage: '请选择涉及人员数量' }]
        },
        location: {
          rules: [{ required: true, errorMessage: '请选择发生地点' }]
        },
        description: {
          rules: [{ required: true, errorMessage: '请描述事件经过' }]
        },
        feelings: {
          rules: [{ required: true, errorMessage: '请描述个人感受' }]
        },
        workImpact: {
          rules: [{ required: true, errorMessage: '请选择影响程度' }]
        }
      },
      eventTypeOptions: [
        { value: 'medication', text: '用药错误' },
        { value: 'surgery', text: '手术相关' },
        { value: 'diagnosis', text: '诊断错误' },
        { value: 'infection', text: '感染事件' },
        { value: 'fall', text: '跌倒事件' },
        { value: 'equipment', text: '设备故障' },
        { value: 'communication', text: '沟通问题' },
        { value: 'other', text: '其他' }
      ],
      severityOptions: [
        { value: 'mild', text: '轻微' },
        { value: 'moderate', text: '中等' },
        { value: 'severe', text: '严重' },
        { value: 'critical', text: '危急' }
      ],
      durationOptions: [
        { value: 'minutes', text: '几分钟' },
        { value: 'hours', text: '几小时' },
        { value: 'days', text: '几天' },
        { value: 'weeks', text: '几周' },
        { value: 'months', text: '几个月' }
      ],
      peopleOptions: [
        { value: '1', text: '1人' },
        { value: '2-3', text: '2-3人' },
        { value: '4-5', text: '4-5人' },
        { value: '6-10', text: '6-10人' },
        { value: '10+', text: '10人以上' }
      ],
      locationOptions: [
        { value: 'ward', text: '病房' },
        { value: 'or', text: '手术室' },
        { value: 'emergency', text: '急诊科' },
        { value: 'icu', text: '重症监护室' },
        { value: 'outpatient', text: '门诊' },
        { value: 'pharmacy', text: '药房' },
        { value: 'lab', text: '检验科' },
        { value: 'other', text: '其他' }
      ],
      impactOptions: [
        { value: 'none', text: '无影响' },
        { value: 'mild', text: '轻微影响' },
        { value: 'moderate', text: '中等影响' },
        { value: 'severe', text: '严重影响' },
        { value: 'extreme', text: '极度影响' }
      ]
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '不良事件特征问卷'
    })
  },
  methods: {
    submitForm() {
      this.$refs.form.validate().then(res => {
        console.log('表单数据：', this.formData)
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        // 这里可以调用API保存数据
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }).catch(err => {
        console.log('表单验证失败：', err)
      })
    }
  }
}
</script>

<style scoped>
.scale-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.scale-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  text-align: center;
}

.scale-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}

.scale-subtitle {
  color: #ffffff;
  font-size: 14px;
  opacity: 0.9;
}

.form-container {
  padding: 20px;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 25px;
  padding: 12px 40px;
  font-size: 16px;
  font-weight: bold;
}

.submit-btn:active {
  opacity: 0.8;
}
</style>


